<template>
    <!-- 进度查看 -->
    <el-card>
        <router-link :to="{name: 'Product.Edit'}">
            <el-button class="btn-primary">产品建档</el-button>
        </router-link>

        <el-table :data="tableData" class="mt-4" v-loading="loading">
            <el-table-column label="序号" align="center" width="60">
                <template slot-scope="{$index}">
                    {{ 10 * (form.page - 1) + $index + 1 }}
                </template>
            </el-table-column>

            <el-table-column label="文件名称" align="center">
                <template slot-scope="{row}">
                    <a :href="v.url" target="_blank" class="text-left" :style="{color: '#666', 'text-decoration': 'none'}" v-for="v in row.files">{{ v.fileName }}</a>
                </template>
            </el-table-column>

            <el-table-column label="文件类型" prop="fileType" align="center"></el-table-column>

            <el-table-column label="牌号" prop="productName" align="center"></el-table-column>

            <el-table-column label="品牌" prop="manufactureName" align="center"></el-table-column>

            <el-table-column label="建议分类" prop="catalogName" align="center"></el-table-column>

            <el-table-column label="上传日期" prop="createTime" align="center">
                <template slot-scope="{row}">
                    {{ row.createTime | formatDate('yy-mm-ss hh:mm:ss') }}
                </template>
            </el-table-column>

            <el-table-column label="转换状态" align="center">
                <template slot-scope="{row}">
                    <span :style="{color: row.status === 3 ? '#E33A4F' : '#02A7FB'}">
                        {{ row.status === 1 ? '转换中' : (row.status === 2 ? '转换成功' : '转换失败') }}
                    </span>
                </template>
            </el-table-column>

            <el-table-column label="操作" align="center">
                <template slot-scope="{row}">
                    <el-button type="text" v-if="row.status === 1" @click="$refs.dialog.open(row)">编辑</el-button>
                    <el-button type="text" class="text-grey" @click="onDelete(row._id, row.productName)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="text-center pt-6">
            <el-pagination
                @current-change="fetchData"
                :current-page.sync="form.page"
                :page-size="form.pagesize"
                layout="prev, pager, next"
                :total="form.total">
            </el-pagination>
        </div>

        <product-edit ref="dialog" v-model="update"></product-edit>
    </el-card>
</template>

<script>
    import {Pagination} from 'element-ui';
    import ProductEdit from '../../components/widget/ProductEdit';

    export default {
        components: {
            ElPagination: Pagination,
            ProductEdit
        },
        data() {
            return {
                tableData: [],
                form: {
                    page: 1,
                    pagesize: 10,
                    total: 1
                },
                loading: false,
                update: false
            };
        },
        watch: {
            update(val) {
                if (val) this.fetchData();
            }
        },
        // computed: {
        //     isAdmin() {
        //         const role = SessionStore.get('loginMesg').role;

        //         // 管理员、注册用户、认证用户
        //         let arr = ['5ab07114076547341878f520', '5ab0758f076547341878f521', '5ab07913076547341878f523'];
        //         return role === arr[0];
        //     },
        // },
        methods: {
            fetchData() {
                this.loading = true;
                // if (!this.isAdmin) this.form.creatorId = SessionStore.get('userMesg').id;
                this.form.creatorId = SessionStore.get('userMesg').id;
                API.get('user/product', {params: this.form}).then(res => {
                    this.form.total = res.total;
                    this.tableData = res.rows;
                }).finally(() => {
                    this.loading = false;
                    this.update = false;
                });
            },
            onDelete(id, name) {
                Ele.$confirm('确定删除产品： ' + name + '?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(res => {
                    API.delete('user/product/' + id).then(res => {
                        Ele.$message.success('删除成功');
                        this.fetchData();
                    })
                }).catch(() => {
                    Ele.$message('取消删除产品： ' + name);
                });
            },
        },
        created() {
            this.fetchData();
        }
    }
</script>
